<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.light { background-color: green; color: green; }
			#textbox>* {width:600px; height: 300px;}
			pre { color: #fff; }
			* {
				font-family: "courier new";
				font-size: 20px;
				font-weight: normal;
			}
		</style>
		<script type="text/javascript">
			var J = {
				id: function(idName) {
					return document.getElementById(idName);
				},
				tags: function(tagName) {
					return document.getElementsByTagName(tagName);	
				}
			};
			onload = function() {
				var text = J.id("text");
				var pre = J.id("bk");
				text.onkeyup = function() {
					
					var txt = this.value.toString();
					txt = txt.replace(/([a-zA-Z])/g, '<span class="light">$1</span>');
					pre.innerHTML = txt;
				}
			};
		</script>
	</head>
	<body style="background-color: pink;">
		<div id="textbox" style="position:relative;width:600px; height: 300px;">
			<pre id="bk" style="margin:0; padding:1px; z-index:1;"></pre>
			<textarea id="text" style="position:absolute; margin:0; padding:0; top:0; left: 0; z-index:2; background: transparent;"></textarea>
		</div>
	</body>
</html>